  <template>
  	<uni-transition mode-class="fade" :duration="300" :show="tabbarShow">
  		<view class="tabbar">
  			<view class="tabbarBox">
  				<view class="handleBox" v-for="(item, index) in tabbarList" :key="`${pageIndex}${index}${item.text}`">
  					<view v-if="item.text==='一键办理'" class="menuBox" @click="oneClickProcessing(item)">
  						<view class="menuIcon">
  							<image class="icon yjbl" :src="item.iconPath"> </image>
  						</view>
  					</view>
  					<button v-if="item.text==='我的客服'" class="menuBox" open-type="contact">
  						<view class="menuIcon">
  							<image class="icon" :src="item.iconPath"> </image>
  						</view>
  						<view class="menuName" v-show="item.text">
  							<text class="text">我的客服</text>
  						</view>
  					</button>
  					<view v-else class="menuBox" @click="goPages(item)">
  						<view class="menuIcon">
  							<text v-if="false" class="dot">{{ dotNum }}</text>
  							<image v-if="item.pagePath === selectPath" class="icon" :src="item.selectedIconPath"> </image>
  							<image v-else class="icon" :src="item.iconPath"></image>
  						</view>
  						<view class="menuName" v-show="item.text">
  							<text v-if="item.pagePath === selectPath" class="text" style="color: #1081ff">{{ item.text }}</text>
  							<text v-else class="text">{{ item.text }}</text>
  						</view>
  					</view>
  				</view>
  			</view>
  		</view>
  	</uni-transition>
  </template>

  <script>
  	import moment from 'moment';
  	export default {
  		props: {
  			pageIndex: {
  				type: String,
  				default: '0'
  			}
  		},
  		watch: {
  			pageIndex: {
  				handler(value) {
  					const routes = getCurrentPages();
  					this.selectPath = `/${routes[routes.length - 1].route}`;
  				},
  				immediate: true,
  				deep: true
  			}
  		},
  		data() {
  			return {
  				tabbarShow: false,
  				selectPath: '',
  				tabbarList: '',
  				dotNum: 0,
  				dotRecord: '' // 节流标记
  			};
  		},
  		// uniapp子组件不支持应用生命周期，所以只能用vue生命周期
  		created() {
  			console.log('tabbar created');
  			// tabbar数据，这儿也支持后台定义通过接口获取数据
  			if (this.$store.state.login.user_id) {
  				if (this.$store.state.login.iccid && this.$store.state.login.iccid.length >= 19) {
  					this.tabbarList = [{
  							pagePath: '/pages/home/withIccid/index',
  							iconPath: '../../static/tabbar/shouye_nor.png',
  							selectedIconPath: '../../static/tabbar/shouye_sel.png',
  							text: '上网猫'
  						},
  						{
  							pagePath: '/pages/order/withIccid/index',
  							iconPath: '../../static/tabbar/order_nor.png',
  							selectedIconPath: '../../static/tabbar/order_sel.png',
  							text: '我的订单'
  						},
  						{
  							pagePath: '/',
  							iconPath: '../../static/tabbar/kefu_nor.png',
  							selectedIconPath: '../../static/tabbar/kefu_sel.png',
  							text: '我的客服'
  						}
  					];
  				} else {
  					this.tabbarList = [{
  							pagePath: '/pages/home/withoutIccid/index',
  							iconPath: '../../static/tabbar/shouye_nor.png',
  							selectedIconPath: '../../static/tabbar/shouye_sel.png',
  							text: '上网猫'
  						},
  						{
  							pagePath: '/pages/order/withoutIccid/index',
  							iconPath: '../../static/tabbar/order_nor.png',
  							selectedIconPath: '../../static/tabbar/order_sel.png',
  							text: '我的订单'
  						},
  						{
  							pagePath: '/',
  							iconPath: '../../static/tabbar/kefu_nor.png',
  							selectedIconPath: '../../static/tabbar/kefu_sel.png',
  							text: '我的客服'
  						}
  					];

  				}

  				this.tabbarShow = true;

  				// this.getDotNum();
  			}
  		},
  		methods: {
  			oneClickProcessing(item) {
  				console.log("Tab click: ", item.text);
  				this.$utils.scanAndBooking(this);
  			},
  			goPages(item) {
  				console.log("Tab click: ", item.text);
  				uni.switchTab({
  					url: item.pagePath,
  					success: () => {
  						console.log("switchTab success: ", item.text);
  					},
  					fail: (e) => {
  						console.log("switchTab fail: ", e);
  						this.goPages(item);
  					},
  				});

  				// this.getDotNum();
  			},
  			async getDotNum() {
  				const now = moment().format('YYYY-MM-DD HH:mm:ss');
  				if (!this.dotRecord || moment(now).diff(moment(this.dotRecord), 'seconds') > 30) {
  					const rollingRes = await this.$http.channel$get_rolling({
  						channel_id: this.$store.state.login.channel_id
  					});
  					this.dotNum = rollingRes.get_resource_num || 0;
  					this.dotRecord = now;
  				}
  			}
  		}
  	};
  </script>
  <style lang="scss">
  	.tabbar {
  		width: 100vw;
  		height: 118rpx;
  		padding-bottom: env(safe-area-inset-bottom);
  		background: linear-gradient(180deg, #f8f8f8 0, #fff 8rpx, #fff 100%);
  		position: fixed;
  		left: 0;
  		bottom: 0;
  		z-index: 9;

  		/* 模糊大小就是靠的blur这个函数中的数值大小 */
  		// backdrop-filter: blur(10px);
  		// border-radius: 60rpx;
  		.tabbarBox {
  			display: flex;
  			justify-content: space-evenly;

  			.handleBox {
  				width: 25vw;
  				height: 118rpx;

  				.menuBox {
  					width: 100%;
  					height: 100%;
  					background: transparent;
  					background-color: transparent;
  					padding: 0;
  					font-size: 24rpx;
  					line-height: 1.5;
  					display: flex;
  					flex-direction: column;
  					justify-content: center;
  					align-items: center;

  					.menuIcon {

  						position: relative;
  						display: flex;
  						justify-content: center;
  						align-items: center;

  						>.icon {
  							width: 40rpx;
  							height: 40rpx;
  						}

  						>.yjbl {
  							width: 88rpx;
  							height: 88rpx;
  						}

  						>.dot {
  							display: block;
  							padding: 8rpx 10rpx;
  							width: max-content;
  							background: #f85a5b;
  							border-radius: 12rpx 12rpx 12rpx 0rpx;
  							font-family: PingFang SC;
  							font-weight: 400;
  							font-size: 16rpx;
  							color: #ffffff;
  							position: absolute;
  							left: 32rpx;
  							bottom: 35rpx;
  						}
  					}

  					.menuName {
  						padding-top: 8rpx;
  						width: 100%;
  						text-align: center;

  						>.text {
  							font-family: PingFang SC;
  							font-weight: 400;
  							font-size: 24rpx;
  							color: #bcbfcc;
  						}
  					}
  				}

  				.menuBox:after {
  					border: none !important;
  				}
  			}
  		}
  	}

  	.Text {
  		font-size: 24rpx;
  		font-family: Cochin, serif;
  		font-weight: 900;
  	}

  	.TextColor {
  		@extend .Text;
  		color: #d81e06;
  	}
  </style>